<template>
  <div>
    <div class="overflow-auto">
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="日历"
                     name="RoomStatus">
        </el-tab-pane>
        <el-tab-pane label="单日"
                     name="TodayRoom">
          <today-room></today-room>
        </el-tab-pane>
        <el-tab-pane label="渠道"
                     name="ChannelStatus">
        </el-tab-pane>
      </el-tabs>
      <div class="right_tab">
        <el-input style="margin-right: 20px; width: 372px"
                  v-model="input"
                  placeholder="请输入内容">
        </el-input>
        <el-popover placement="bottom"
                    trigger="click">
          <div style="display:flex;flex-direction: column;">
            <el-button type="text"
                       class="bt-hover"
                       @click="open">批量开房</el-button>
            <el-button type="text"
                       class="bt-hover"
                       @click="close">批量关房</el-button>
            <!-- 批量开关房 -->
            <el-dialog :title="batch_title"
                       :visible.sync="batch_dialog"
                       width="30%">
              <!-- 第一步 -->
              <div class="batch_body">
                <div class="batch_left">
                  <el-tree :data="treeData"
                           show-checkbox>
                  </el-tree>
                </div>
                <div class="batch_right">
                  <span>已选房间</span>
                  <el-button>取 消</el-button>
                  <el-button type="primary">确 定</el-button>
                </div>

              </div>
              <!-- end  第一步 -->

            </el-dialog>
            <!-- end 批量开关房 -->
          </div>
          <el-button plain
                     slot="reference">批量开/关房</el-button>
        </el-popover>

        <el-button style="margin-left: 10px;"
                   type="primary"
                   plain>房价管理</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import TodayRoom from "../../componnets/TodayRoom";
export default {
  components: {
    TodayRoom,

  },
  data () {
    return {
      input: null,
      activeName: "TodayRoom",
      batch: false,
      batch_dialog: false,
      batch_title: '',
      treeData: [{
        id: 1,
        label: '一级 2',
        children: [{
          id: 3,
          label: '二级 2-1',
          children: [{
            id: 4,
            label: '三级 3-1-1'
          }, {
            id: 5,
            label: '三级 3-1-2',
            disabled: true
          }]
        }, {
          id: 2,
          label: '二级 2-2',
          disabled: true,
          children: [{
            id: 6,
            label: '三级 3-2-1'
          }, {
            id: 7,
            label: '三级 3-2-2',
            disabled: true
          }]
        }]
      }],
    }
  },
  methods: {
    handleClick (tab, event) {
      if (tab.name == 'RoomStatus') {
        console.log(tab.name);
        this.$router.push({ path: '/RoomStatus' })

      } else if (tab.name == 'ChannelStatus') {
        this.$router.push({ path: '/ChannelStatus' })

      }

    },
    open () {
      this.batch_dialog = true
      this.batch_title = '批量开房'
    },
    close () {
      this.batch_dialog = true
      this.batch_title = '批量关房'
    },
  }
}
</script>

<style lang="scss" scoped>
.bt-hover {
  padding: 10px;
  color: black;
}
.bt-hover:hover {
  background-color: #f5f7fd;
}
.el-button + .el-button {
  margin-left: 0px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  border-radius: 4px 0 0 4px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
  border-radius: 0px 4px 4px 0px;
}
::v-deep {
  .el-tabs--card > .el-tabs__header {
    border-bottom: 0px;
    .el-tabs__nav .is-top {
      background-color: white;
    }
  }
  .el-tabs__header {
    margin-bottom: 0px !important;
  }
  .el-tabs .el-tabs--top {
    height: 100% !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    font-size: 14px;
    border-color: rgba(4, 134, 254, 1);
    color: rgba(4, 134, 254, 1);
    border-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-top-style: solid;
  }
}
.el-tabs {
}
.el-tabs__header .is-top {
  // display: inline-block;
}
.right_tab {
  position: absolute;
  display: flex;
  top: 0%;
  right: 0%;
  margin-right: 20px;
}
.overflow-auto {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: auto;
  position: absolute;
  flex-direction: column;
}
.batch_body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  .batch_left {
    width: 50%;
  }
  .batch_right {
    width: 50%;
    display: flex;
  }
}
</style>
